﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>自定义表头菜单</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="../demo.css" rel="stylesheet" type="text/css" />
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
    <script src="js/ColumnsMenu.js" type="text/javascript"></script>

</head>
<body>
    <h1>
        表头菜单</h1>
    <div id="datagrid1" class="mini-datagrid" style="width: 700px; height: 280px;" url="../data/AjaxService.aspx?method=SearchEmployees"
        idfield="id" ondrawgroup="onDrawGroup">
         <div property="columns">
            <div type="indexcolumn">
            </div>
            <div field="loginname" width="120" headeralign="center" allowsort="true">
                员工帐号</div>
            <div field="name" width="120" headeralign="center" allowsort="true">
                姓名</div>
            <div field="gender" width="100" allowsort="true" renderer="onGenderRenderer" align="center"
                headeralign="center" renderer="onGenderRenderer">
                性别</div>
            <div field="salary" width="100" allowsort="true">
                薪资</div>
            <div field="age" width="100" allowsort="true">
                年龄</div>
            <div name="birthday" field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
            </div>    
            <div field="createtime" width="100" headeralign="center" dateformat="yyyy-MM-dd"
                allowsort="true">创建日期</div>
            <div field="remarks" width="120" headerAlign="center" allowSort="true">备注
            </div>
        </div>
    </div>
   
    <div class="description">
        <h3>Description</h3>
        <ol>
            <li>鼠标移动到表头，点击trigger图标，弹出下拉菜单</li>
            <li>参考：<a href="js/columnsmenu.js" target="_blank">demo/datagrid/js/columnsmenu.js</a></li>
        </ol>
    </div>

    <script type="text/javascript">
        mini.parse();

        var grid = mini.get("datagrid1");
        grid.load();

        var menu = new ColumnsMenu(grid);


        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];
        function getGenderText(id) {
            for (var i = 0, l = Genders.length; i < l; i++) {
                var g = Genders[i];
                if (g.id == id) return g.text;
            }
            return "";
        }
        function onGenderRenderer(e) {
            return getGenderText(e.value);
        }

        function onDrawGroup(e) {
            if (e.field == "gender") {
                e.cellHtml = "性别：" + getGenderText(e.value);
            }
        }
       
    </script>
</body>
</html>
